Hub AppStyles

The Hub AppStyles object contains detailed properties for adjusting the embedded client application's appearance when used inside an embedded hub. It overrides the general "Theme" application style set in the hubEmbedOptions object - which is only light or dark.

Hub Style vs Hub AppStyle vs Content Themes

• Hub Styles - adjusts the embedded hub shell itself. These styles customize the basic hub theme selected.
• Hub AppStyles - adjusts the application holding content (effectively an extension to the styles above).
• Content Themes - adjusts the look and feel of reports, visuals and dashboards

Hub AppStyles are an identical construct to direct content embedding AppStyles.

Constructors

• There is NO constructor for the AppStyles object
• AppStyles are made up of a collection of hierarchical properties (key-value pairs)

The AppStyles object is fully enumerated below. It can be supplied in a hierarchical format, or as a namespace delimited format (see examples below).

You do NOT need to supply the entire object - as settings will be adjusted for those properties supplied only.

App Styles Object structure

• global – global font styles and icons
• contextMenu – context menu style and icons
• smartInsights – smart insights dialog style
• present – presentation specific styles, like the side menu
• dialog – all pop-up dialog styles
• chatbot – chatbot style

Nested Structure

The following code snippet shows the ENTIRE AppStyle structure with every property that can be set.

{
  "global": {
    "font": "",
    "icons": {
      "help": "",
      "close": "",
      "minimize": ""
    }
  },
  "contextMenu": {
    "background": "",
    "border": "",
    "borderRadius": "",
    "icons": {
      "menuItemArrowRight": "",
      "menuItemArrowLeft": ""
    },
    "separator": {
      "color": ""
    },
    "menuItem": {
      "color": "",
      "font": "",
      "hover": {
        "background": "",
        "color": ""
      },
      "icons": {
        "analyzeFurther": "",
        "bookmarks": "",
        "chatbot": "",
        "copyColumn": "",
        "copyContent": "",
        "copyDataPointValue": "",
        "copyHeaderValue": "",
        "copyMemberValue": "",
        "copyRow": "",
        "copySelections": "",
        "dataInteractions": "",
        "drillToLevel": "",
        "eliminate": "",
        "eliminateDataPoint": "",
        "exitFullscreen": "",
        "extendedOperations": "",
        "focus": "",
        "focusAndInteract": "",
        "focusDataPoint": "",
        "fullscreen": "",
        "information": "",
        "memberSelection": "",
        "modelAttribute": "",
        "modelDimension": "",
        "modelHierarchy": "",
        "modelLevel": "",
        "modelMember": "",
        "newBookmark": "",
        "pyramidActions": "",
        "quickCalc": "",
        "rating": "",
        "redo": "",
        "removeFromQuery": "",
        "rerunQueries": "",
        "reset": "",
        "runSlicers": "",
        "selectedMembers": "",
        "showConversation": "",
        "startConversation": "",
        "toggleMultiHighlightMode": "",
        "undo": "",
        "swap": "",
        "addToQuery": "",
        "dice": "",
        "resetQuery": "",
        "changeVisual": "",
        "odata": "",
        "printReport": "",
        "printReportPdf": "",
        "printReportPng": "",
        "printReportExcel": "",
        "printReportCsv": "",
        "conditionalFormatting": "",
        "pivot": "",
        "sortWizard": "",
        "copyRawData": "",
        "copyVisualData": "",
        "showRangeSlider": "",
        "copyOdataLink": "",
        "copyOdataLinkNoFilter": "",
        "copyOdataSnippet": "",
        "copyOdataSnippetNoFilters": "",
        "quickSort": "",
        "quickFilter": ""
      }
    }
  },
  "smartInsights": {
    "background": "",
    "contentSection": {
      "title": {
        "font": "",
        "color": ""
      },
      "measure": {
        "font": "",
        "color": ""
      },
      "value": {
        "font": "",
        "color": ""
      }
    },
    "icons": {
      "logo": ""
    }
  },
  "present": {
    "sideMenu": {
      "background": "",
      "color": "",
      "font": "",
      "border": "",
      "borderRadius": "",
      "boxShadow": "",
      "header": {
        "background": "",
        "color": "",
        "font": ""
      },
      "icons": {
        "rerunQueries": "",
        "multiHighlight": ""
      },
      "controls": {
        "toggle": {
          "on": {
            "background": ""
          },
          "off": {
            "background": ""
          }
        }
      }
    }
  },
  "dialog": {
    "borderRadius": "",
    "header": {
      "background": "",
      "color": "",
      "font": ""
    },
    "footer": {
      "background": "",
      "button": {
        "background": "",
        "color": "",
        "font": ""
      }
    }
  },
  "chatbot": {
    "background": "",
    "icons": {
      "reset": "",
      "clearMessages": "",
      "newQuery": "",
      "mute": "",
      "unmute": "",
      "logo": ""
    },
    "message": {
      "incoming": {
        "background": "",
        "font": "",
        "color": "",
        "border": "",
        "borderRadius": ""
      },
      "outgoing": {
        "background": "",
        "font": "",
        "color": "",
        "border": "",
        "borderRadius": ""
      },
      "userAvatar": {
        "background": "",
        "color": ""
      }
    },
    "input": {
      "font": "",
      "color": "",
      "icons": {
        "send": "",
        "startRecording": "",
        "stopRecording": "",
        "recordingNow": ""
      }
    }
  }
};
		

Flat vs Hierarchical

You can provide the object syntax hierarchically (as shown above), or flattened (see example below). When providing the flattened object, be sure to encase the keys in quotes.

Setting Properties

The following guide explains how to set the various types of properties. In general, they follow standard CSS rules.

To see specific examples for each property, see examples below.

Fonts

Set fonts using standard CSS font settings

font: 'bold 16px Roboto, sans-serif'

font: italic 12px "Fira Sans", serif

Background Colors

Set backgrounds using standard CSS HEX numbers, RGB or more complex background fills like gradients

background: "#f0f0f0"

background: hsla(30, 100%, 50%. 0.6)

background: rgba(34, 12, 64, 0.6)

Borders

Set border using standard CSS

border: "1px solid blue"

borderRadius: "5px"

borderRadius: "5px 0 3px 4px"

Shadows

Set shadows using standard CSS

shadow: "2px 2px 5px rgba(0,0,0,0.5)"

Icons

Set icons using standard CSS class names. The snippet below uses something like Font Awesome, which can be referenced on the host page.

bookmarks: 'fa-solid fa-question'

An alternative for icons is to use URLs or provide the raw image data in base64, exactly the same way one would through CSS.

bookmarks: 'url("custom-close-icon.png")'

logo: "url(https://example.com/chatbot-logo.png)",

bookmarks: 'url(data:image/png;base64,R0lGODl...)'

Font Awesome icons can be used by simply referencing the font awesome library in the host page. This approach will work with any 3rd party framework as well.

Examples

You can find examples of how to use AppStyles here.